<template>
    <div class="dialog">

        <!-- visible.sync 添加以后才能正常关闭-->
        <el-dialog :title="dialog.title"
                   :visible.sync="dialog.show"
                   :close-on-click-modal="false"
                   :close-on-press-escape="false"
                   :modal-append-to-body="false">

            <div class="form">
                <el-form
                        ref="form"
                        :model="fromData"
                        :rules="rules"
                        label-width="120px"
                        style="margin:10px;width:auto;">

                    <el-form-item prop='username' label="用户名:">
                        <el-input type="username" v-model="fromData.username"></el-input>
                    </el-form-item>

                    <el-form-item prop='password' label="密码:">
                        <el-input type="password" v-model="fromData.password"></el-input>
                    </el-form-item>

                    <el-form-item prop='phone' label="手机号:">
                        <el-input type="phone" v-model="fromData.phone"></el-input>
                    </el-form-item>
                    <el-form-item prop='email' label="邮箱:">
                        <el-input type="email" v-model="fromData.email"></el-input>
                    </el-form-item>

                    <el-form-item prop='status' label="状态:">
                        <el-radio-group v-model="fromData.status">
                            <el-radio :label="1">激活</el-radio>
                            <el-radio :label="2">锁定</el-radio>
                        </el-radio-group>
                    </el-form-item>

                    <el-form-item prop='sex' label="性别:">
                        <el-radio-group v-model="fromData.sex">
                            <el-radio :label="1">男</el-radio>
                            <el-radio :label="2">女</el-radio>
                            <el-radio :label="3">未知</el-radio>
                        </el-radio-group>
                    </el-form-item>

                    <!--<el-form-item prop="type" label="角色类型:">-->
                        <!--<el-select v-model="fromData.type" multiple placeholder="角色类型">-->
                            <!--<el-option-->
                                    <!--v-for="item in role_list"-->
                                    <!--:key="item.id"-->
                                    <!--:label="item.roleName" :value="item.id"-->
                            <!--&gt;</el-option>-->
                        <!--</el-select>-->
                    <!--</el-form-item>-->

                    <el-form-item class="text_right">
                        <el-button @click="dialog.show = false">取 消</el-button>
                        <el-button type="primary" @click='onSubmit'>提 交</el-button>
                    </el-form-item>

                </el-form>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        name: "UserDialog",
        props: {
            dialog: Object,
            fromData: Object
        },
        data() {
            return {
                role_list: [{
                    id: '选项1',
                    roleName: 'admin'
                }, {
                    id: '选项2',
                    roleName: '普通用户'
                }, {
                    id: '选项3',
                    roleName: '角色3'
                }, {
                    id: '选项4',
                    roleName: '角色23'
                }, {
                    id: '选项5',
                    roleName: '角色36'
                }],
                rules: {
                    username: [
                        {required: true, message: "用户名不能为空！", trigger: "blur"}
                    ],
                    password: [
                        {required: true, message: "密码不能为空！", trigger: "blur"}
                    ],
                    // phone: [
                    //     {required: true, message: "手机号不能为空！", trigger: "blur"}
                    // ]
                }
            }
        },
        methods: {
            onSubmit() {
                this.$refs['form'].validate(valid => {
                    if (valid) {
                        //表单数据验证完成之后，提交数据;
                        let config = {
                            'Content-Type': 'application/json'
                        };
                        this.$axios.request({
                                url: '/api/user',
                                method: this.dialog.option == "add" ? "post" : "put",
                                data: JSON.stringify(this.fromData),
                                headers: config
                            }
                        ).then(res => {
                            if (res.data.code === 0) {
                                // 操作成功
                                this.$message({
                                    message: "保存成功！",
                                    type: "success"
                                });
                                this.dialog.show = false;
                                this.$emit("update");    //父的update
                            }
                        });
                    }
                });
            }
        }
    }
</script>

<style scoped>

</style>
